<form #f="ngForm" (ngSubmit)="submit(f)">
  <div ngModelGroup="contact">
      <div class="form-group">
          <label for="firstName">FirstName</label>
          <input required ngModel 
          minlength="3" maxlength="10"
          name="firstName" #firstName="ngModel" type="text" class="form-control" id="firstName">
          <div class="alert alert-danger" *ngIf="firstName.touched && !firstName.valid">
              <div *ngIf="firstName.errors.required">First name is required</div>
              <div *ngIf="firstName.errors.minlength">First name should be minimum {{ firstName.errors.minlength.requiredLength }} charcters</div>
          </div>
        </div>
  </div>
  
  <div class="form-group">
    <label for="comment">Comment</label>
    <textarea ngModel name="comment" cols="30" rows="10" class="form-control" id="comment"> </textarea>
  </div>
  <div class="checkbox">
    <label>
        <input type="checkbox" ngModel name="isSubscribed">Subscribe to mailin
    </label>
  </div>
  <div class="form-group">
    <label for="contactMethod">ContactMethod</label>
    <select multiple ngModel name="contactMethod" id="contactMethod" class="form-control">
      <option value=""></option>
      <option *ngFor="let method of contactMethods" [value]="method.id">{{ method.name }}</option>
    </select>
  </div>
  <div *ngFor="let method of contactMethods" class="radio">
    <label>
      <input ngModel type="radio" name="contactMethod1" [value]="method.id">
      {{ method.name }}
    </label>
  </div>
  
  <p>
    {{ f.value | json }}
  </p>
  <button [disabled]="!f.valid" class="btn btn-primary">Submit</button>
</form>